<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css" />
<script src="./js/jquery-2.0.3.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

<!-- 生成工号  -->
<script type="text/javascript">
	$(function() {

		var text = "ZR";
		var date = new Date();
		var year = null;
		var month = null;
		var tian = null;
		var hour = null;
		var minute = null;

		//获取年份
		year = date.getFullYear() + "";

		//获取月份
		if (date.getMonth() < 10) {
			month = "0" + (date.getMonth() + 1);

		} else {
			month = date.getMonth() + 1;
		}

		//获取日期
		if (date.getDate() < 10) {
			tian = "0" + date.getDate();

		} else {
			tian = date.getDate();
		}

		//获取小时
		if (date.getHours() < 10) {
			hour = "0" + date.getHours();

		} else {
			hour = date.getHours();
		}

		//获取分钟
		if (date.getMinutes() < 10) {
			minute = "0" + date.getMinutes();

		} else {
			minute = date.getMinutes();
		}

		var id = text + year.substring(2, 4) + month + tian + hour + minute;

		console.log(id);
		$("#empno").val(id);

	})
</script>

</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<!-- 修改信息 -->
		<div id="editFormDiv" style="display: none">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">工号</label>
					<div class="layui-input-block">
						<input type="text" name="empno1" id="empno1" lay-verify="title"
							autocomplete="off" class="layui-input layui-disabled"
							required="required" readonly>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="empname1" id="empname1"
							lay-verify="title" autocomplete="off"
							class="layui-input layui-disabled" required="required" readonly>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="emppwd1" id="emppwd1"
							lay-verify="title" autocomplete="off" placeholder="请输入密码"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<select class="layui-select" name="emppos1" id="emppos1">
						<option hidden="-请选择职位-">-请选择职位-</option>
						<option value="1">-员工-</option>
						<option value="2">-主管-</option>
						<option value="3">-采购-</option>
						<option value="4">-质检-</option>
						<option value="5">-仓管-</option>
						<option value="6">-经理-</option>
					</select><br />
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-input-block">
						<input type="date" name="empdate1" id="empdate1"
							class="layui-input layui-disabled" required="required" readonly>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="text" name="empphone1" id="empphone1"
							lay-verify="title" autocomplete="off" placeholder="请输入电话"
							pattern="[0-9]{11}" class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="email" name="empemail1" id="empemail1"
							lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text" name="empaddress1" id="empaddress1"
							lay-verify="title" autocomplete="off" placeholder="请输入地址"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="radio" name="empstatus1" id="empstatus1_1" value="1"
							title="在职"> <input type="radio" name="empstatus1"
							id="empstatus1_2" value="0" title="离职">
					</div>
				</div>
				<div class="layui-form-item">
					<select class="layui-select" name="deptid1" id="deptid1">
						<option hidden="-请选择部门-">-请选择部门-</option>
					</select><br />
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 添加emp -->
		<div id="addemp1" style="display: none">
			<form class="layui-form" action="" lay-filter="example">
				<div class="layui-form-item">
					<label class="layui-form-label">工号</label>
					<div class="layui-input-block">
						<input type="text" name="empno" id="empno" lay-verify="title"
							autocomplete="off" class="layui-input" required="required"
							readonly>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="empname" id="empname" lay-verify="title"
							autocomplete="off" placeholder="请输入姓名" class="layui-input"
							required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="emppwd" id="emppwd"
							lay-verify="title" autocomplete="off" placeholder="请输入密码"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<select class="layui-select" name="emppos" id="emppos">
						<option hidden="-请选择职位-">-请选择职位-</option>
						<option value="1">-员工-</option>
						<option value="2">-主管-</option>
						<option value="3">-采购-</option>
						<option value="4">-质检-</option>
						<option value="5">-仓管-</option>
						<option value="6">-经理-</option>
					</select><br />
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-input-block">
						<input type="date" name="empdate" id="empdate" class="layui-input"
							required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="text" name="empphone" id="empphone"
							lay-verify="title" autocomplete="off" placeholder="请输入电话"
							pattern="[0-9]{11}" class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="email" name="empemail" id="empemail"
							lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text" name="empaddress" id="empaddress"
							lay-verify="title" autocomplete="off" placeholder="请输入地址"
							class="layui-input" required="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="radio" name="empstatus" id="empstatus_1" value="1"
							title="在职" checked="checked"> <input type="radio"
							name="empstatus" id="empstatus_2" value="0" title="离职">
					</div>
				</div>
				<div class="layui-form-item">
					<select class="layui-select" name="deptid" id="deptid">
						<option hidden="-请选择部门-">-请选择部门-</option>
					</select><br />
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							id="btn">立即提交</button>
					</div>
				</div>
			</form>
		</div>


		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<form action="">
				<div class="demoTable">
					搜索：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"  placeholder="请输入员工姓名"
							autocomplete="off">
					</div>
					<div class="layui-inline">
					<select class="layui-select" name="pos" id="demoReload2">
						<option value="">-请选择职位-</option>
						<option value="1">-员工-</option>
						<option value="2">-主管-</option>
						<option value="3">-采购-</option>
						<option value="4">-质检-</option>
						<option value="5">-仓管-</option>
						<option value="6">-经理-</option>
					</select><br />
					</div>
					<div class="layui-inline">
					<select class="layui-select" name="sta" id="demoReload3">
						<option value="">-请选择状态-</option>
						<option value="1">-在职-</option>
						<option value="0">-离职-</option>
					</select><br />
					</div>
					<div class="layui-inline">
					<input class="layui-input"  name="starttime" id="demoReload4" placeholder="起始时间"
							autocomplete="off" style="width:150px;">
					</div>
					<div class="layui-inline">
					<input class="layui-input"  name="endtime" id="demoReload5" placeholder="终止时间"
							autocomplete="off" style="width:150px;">
					</div>
					
					<button class="layui-btn" data-type="reload">搜索</button>
					<button type="reset" lay-filter="formDemoreset"
										class="layui-btn" id="reset">重置</button>
				</div>
				</form>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>


	</div>


	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
  
	<button class="layui-btn layui-btn-sm" lay-event="addemp">添加员工</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	<script src="./layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
	
		layui
				.use(
						'table',
						function() {
							var table = layui.table;

							table
									.render({
										elem : '#test',//显示位置
										url : 'emppage',//地址和springmvc中控制器地址一致
										toolbar : '#toolbarDemo',
										title : '文章数据表',
										cols : [ [
												{
													type : 'checkbox',
													fixed : 'left'
												},
												{
													field : 'empno',
													title : '工号',
													width : 80,
													fixed : 'left',
													unresize : true,
													sort : true
												},
												{
													field : 'empname',
													title : '姓名',
													width : 80
												},
												{
													field : 'emppos',
													title : '职位',
													width : 80,
													templet : function(res) {
														return res.emppos == 1 ? "员工"
																: res.emppos == 2 ? "主管"
																		: res.emppos == 3 ? "采购"
																				: res.emppos == 4 ? "质检"
																						: res.emppos == 5 ? "仓管"
																								: "经理"
													}
												},
												{
													field : 'empdate',
													title : '入职日期',
													width : 100
												},
												{
													field : 'empphone',
													title : '电话',
													width : 100,
												},
												{
													field : 'empemail',
													title : '邮箱',
													width : 100,
													sort : true
												},
												{
													field : 'empaddress',
													title : '地址',
													width : 120,
													sort : true
												},
												{
													field : 'empstatus',
													title : '状态',
													width : 60,
													templet : function(res) {
														return res.empstatus == 1 ? "在职"
																: "离职";
													}
												},
												{
													field : 'deptname',
													title : '部门',
													width : 100,
													templet : '<div>{{d.deptids.deptname}}</div>'
												}, {
													fixed : 'right',
													title : '操作',
													toolbar : '#barDemo',
													width : 250
												} ] ],
										page : true,
										id : 'testReload'
									});

							//头工具栏事件
							table.on('toolbar(test)',
									function(obj) {
										var checkStatus = table
												.checkStatus(obj.config.id);
										switch (obj.event) {
										case 'getCheckData':
											var data = checkStatus.data;
											layer.alert(JSON.stringify(data));
											break;
										case 'getCheckLength':
											var data = checkStatus.data;
											layer.msg('选中了：' + data.length
													+ ' 个');
											break;
										case 'isAll':
											layer.msg(checkStatus.isAll ? '全选'
													: '未全选');
											break;
										case 'addemp':
											layer.open({
												type : 1//弹出层 div
												,
												area : [ '600px', '430px' ],
												shade : 0.6,
												id : 'LAY_layuipro01' //设定一个id，防止重复弹出
												,

												content : $("#addemp1"), //后面不用.html()

											});
											break;

										}
										;
									});

							//监听行工具事件
							table
									.on(
											'tool(test)',
											function(obj) {
												var data = obj.data;
												//console.log(obj)
												if (obj.event === 'del') {
													layer
															.confirm(
																	'真的删除行么',
																	function(
																			index) {

																		//console.log(data); //得到的是当前行对应的数据信息
																		console
																				.log("empno :"
																						+ data.empno);
																		$.ajax({
																					type : "get", //提交方式
																					url : "delemp/"
																							+ data.empno, //地址和springmvc中控制器地址一致
																					success : function(
																							flag) {
																						layer
																								.msg(
																										flag == true ? "删除成功"
																												: "删除失败",
																										{
																											time : 2000
																										//两秒延迟
																										},
																										function() {
																											if (flag == true) {

																												//obj.update(); ?? 理想
																												//layer.close(index);;
																												parent.layer
																														.closeAll();//关闭所有,简单粗暴
																												window.location
																														.reload();//刷新父页面
																											}

																										});

																					}
																				});

																	});
												} else if (obj.event === 'edit') {

													//先给我们的表单元素赋值
													$("#empno1").attr("value",
															data.empno);
													$("#empname1").attr(
															"value",
															data.empname);
													console.log($("#empname1")
															.val());
													$("#emppwd1").attr("value",
															data.emppwd);
													//职位
													$(
															"#emppos1 option[value='"
																	+ data.emppos
																	+ "']")
															.attr('selected',
																	'selected');
													$("#empdate1").attr(
															"value",
															data.empdate);
													$("#empphone1").attr(
															"value",
															data.empphone);
													$("#empemail1").attr(
															"value",
															data.empemail);
													$("#empaddress1").attr(
															"value",
															data.empaddress);
													//状态
													 if (data.empstatus == "1") {
														$(
																"input[name='empstatus1'][value='1']")
																.prop(
																		"checked",
																		true);
													} else {
														$(
																"input[name='empstatus1'][value='0']")
																.prop(
																		"checked",
																		true);
													} 
													layui.form.render('radio');

													console.log(data.deptid);
													$(
															"#deptid1 option[value='"
																	+ data.deptid
																	+ "']")
															.attr('selected',
																	'selected');

													//$("#deptid1").html(data.deptid);

													//等级

													layer.open({
																type : 1//弹出层 div
																,
																area : [
																		'600px',
																		'430px' ],
																shade : 0.6,
																id : 'LAY_layuipro' //设定一个id，防止重复弹出
																,
																content : $("#editFormDiv"), //后面不用.html()

															});

													//表单的render
													layui.form.render();

													/* layer.prompt({
														formType : 2,
														//value : data.userName //.email
														value : JSON.stringify(data)
													}, function(value, index) {
														obj.update({
															email : value
														});
														layer.close(index);
													}); */
												}
											});

							/*表格数据重载 模糊检索*/
							var $ = layui.$, active = {
								reload : function() {
									var demoReload = $('#demoReload');
									var demoReload2 = $('#demoReload2');
									var demoReload3 = $('#demoReload3');
									var demoReload4 = $('#demoReload4');
									var demoReload5 = $('#demoReload5');
									
									var begin = $('#demoReload4').val();
									var end = $('#demoReload5').val(); 
									
									if(begin > end){
										layer.msg("开始时间不能比结束时间大");	
										$('#demoReload5').val($('#demoReload4').val());
										return false;
									}
									
									
									//执行重载
									table.reload('testReload', {
										page : {
											curr : 1
										//重新从第 1 页开始
										},
										where : { //检索的条件
											//传递的参数 key为参数名 {} 内传递的是参数的值
											/* key: {
											  
											  id: demoReload.val(),
											  username :....
											} */
											//只有一个key : value格式
											keywords : demoReload.val(),
											keywords2 : demoReload2.val(),
											keywords3 : demoReload3.val(),
											keywords4 : demoReload4.val(),
											keywords5 : demoReload5.val()
										}
									});
								}
							};

							$('.demoTable .layui-btn').on('click', function() {
								var type = $(this).data('type');
								active[type] ? active[type].call(this) : '';
							});

							/*修改 表单的提交 按钮的单击事件 ，监听1 */
							$(document).on("click", ".btn-update", function() {
								//可以实现 比较麻烦....
								//console.log(layui.form.data);
							});

							//监听提交  新增加的代码  监听2
							layui.form.on('submit(demo1)', function(data) {
								/* layer.alert(JSON.stringify(data.field), {
									title : '最终的提交信息'
								}) */
								//表单中的数据 进行转换，得到一个json格式的字符串
								//console.log(JSON.stringify(data.field));
								//ajax请求实现访问控制器
								var empno = $("#empno1").val();
								var empname = $("#empname1").val();
								var emppwd = $("#emppwd1").val();
								var emppos = $("#emppos1").val();
								var empdate = $("#empdate1").val();
								var empphone = $("#empphone1").val();
								var empemail = $("#empemail1").val();
								var empaddress = $("#empaddress1").val();
								var empstatus = $('input:radio:checked').val();
								var deptid = $("#deptid1").val();
								console.log(empstatus);
								$.ajax({
									type : "put", //提交方式
									url : "updateemp", ////地址和springmvc中控制器地址一致
									data : JSON.stringify({
										"empno" : empno,
										"empname" : empname,
										"emppwd" : emppwd,
										"emppos" : emppos,
										"empdate" : empdate,
										"empphone" : empphone,
										"empemail" : empemail,
										"empaddress" : empaddress,
										"empstatus" : empstatus,
										"deptid" : deptid
									}), //提交给控制器的数据
									contentType : "application/json", //提交给控制的数据 格式
									success : function(flag) {
										console.log(flag);
										layer.msg(flag == true ? "修改成功"
												: "修改失败", {
											time : 2000
										//两秒延迟
										}, function() {
											if (flag == true) {

												//obj.update(); ?? 理想
												//layer.close(index);
												parent.layer.closeAll();//关闭所有,简单粗暴
												window.location.reload();//刷新父页面
											}

										});

									}
								});

								return false;
							});

						});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>

	<script type="text/javascript">
		//页面加载时，加载所有项
		$(function() {
			$.ajax({
				url : 'seldeptall',
				type : "get",
				dataType : "json",
				success : function(data) {
					console.log(data);
					$.each(data, function(i, v) {
						//字符串拼接--为option添加元素
						$("#deptid").append(
								"<option value="+v.deptid+">" + v.deptname
										+ "</option>");
						$("#deptid1").append(
								"<option value="+v.deptid+">" + v.deptname
										+ "</option>");
					});
				}
			});
		});
	</script>

	<script type="text/javascript">
		$(function() {
			$("#btn").click(function() {
				var empno = $("#empno").val();
				var empname = $("#empname").val();
				var emppwd = $("#emppwd").val();
				var emppos = $("#emppos").val();
				var empdate = $("#empdate").val();
				var empphone = $("#empphone").val();
				var empemail = $("#empemail").val();
				var empaddress = $("#empaddress").val();
				var empstatus = $('input:radio:checked').val();
				var deptid = $("#deptid").val();
				console.log(empno);
				console.log(empname);
				console.log(emppwd);
				console.log(emppos);
				console.log(empdate);
				console.log(empphone);
				console.log(empemail);
				console.log(empaddress);
				console.log(empstatus);
				console.log(deptid);
				$.ajax({
					url : "addemp",
					type : "post",
					data : JSON.stringify({
						"empno" : empno,
						"empname" : empname,
						"emppwd" : emppwd,
						"emppos" : emppos,
						"empdate" : empdate,
						"empphone" : empphone,
						"empemail" : empemail,
						"empaddress" : empaddress,
						"empstatus" : empstatus,
						"deptid" : deptid
					}),
					dataType : "json",
					contentType : "application/json",
					success : function(flag) {
						console.log(flag);
						layer.msg(flag == true ? "添加成功" : "添加失败", {
							time : 2000
						//两秒延迟
						}, function() {
							if (flag == true) {

								//obj.update(); ?? 理想
								//layer.close(index);;
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.location.reload();//刷新父页面
							}

						});
					}
				});
			});
		});
		
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			// 时间选择器初始化 开始时间
			laydate.render({
				elem : '#demoReload4',
				theme: '#1e9fff',
				calendar: true,
				done : function(value, date, endDate) {
					var startDate = new Date(value).getTime();
					var endTime = new Date($('#demoReload5').val()).getTime();
					if (endTime < startDate) {
						layer.msg('结束时间不能小于开始时间');
						$('#demoReload4').val($('#demoReload5').val());
					}
				}
			})
			laydate.render({ //结束时间
				elem : '#demoReload5',
				theme: '#1e9fff',
				calendar: true,
				done : function(value, date, endDate) {
					var startDate = new Date($('#demoReload4').val())
							.getTime();
					var endTime = new Date(value).getTime();
					if (endTime < startDate) {
						layer.msg('结束时间不能小于开始时间');
						$('#demoReload5').val($('#demoReload4').val());
					}
				}
			})
		});
		
		
	</script>




</body>
</html>